<template>
  <span style="margin-left: 6px;">
    <el-button type="primary" :size="size" :class="className" icon="el-icon-download" @click.native="beforeExport">{{ btnText }}</el-button>
    <div
      v-if="loading"
      v-loading="true"
      element-loading-text="正在准备导出数据..."
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="exportMask" />
  </span>
</template>

<script>
// 导出excel
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  name: 'ExportExcel',
  props: {
    tableId: {
      type: String,
      require: true
    },
    btnText: {
      type: String,
      default: '导出'
    },
    fileName: {
      type: String,
      default: 'excel'
    },
    className: {
      type: String,
      default: 'form-button'
    },
    size: {
      type: String,
      default: 'default'
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    beforeExport() {
      // 导出前，加载全部数据
      this.loading = true
      this.$emit('before')
      // this.exportExcel()
    },
    exportExcel() {
      /* 从表生成工作簿对象 */
      var fix = document.querySelector('.el-table__fixed-right') // 处理含有fixed列的表格
      var wb
      if (fix) {
        try {
          wb = XLSX.utils.table_to_book(document.querySelector('#' + this.tableId).removeChild(fix))
          document.querySelector('#' + this.tableId).appendChild(fix)
        } catch (e) {
          wb = XLSX.utils.table_to_book(document.querySelector('#' + this.tableId))
        }
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector('#' + this.tableId))
      }
      // 隐藏操作
      try {
        for (const v in wb.Sheets.Sheet1) {
          if (wb.Sheets.Sheet1[v].v === '操作') {
            wb.Sheets.Sheet1[v].v = ''
          }
        }
      } catch (e) {
        console.error(e)
      }
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象。
          // Blob 表示的不一定是JavaScript原生格式的数据。
          // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: 'application/octet-stream' }),
          // 设置导出文件名称
          this.fileName + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      this.loading = false
      setTimeout(_ => {
        // 导出后，重新按分页查询
        this.$emit('complete')
      }, 300)
      return wbout
    }
  }
}
</script>

<style scoped lang="scss">
  .exportMask {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
  }
</style>
